<template>
  <div class="container">
    <div class="com-box" v-if="isComBox">
      <Container @isconceal="isComBox=false"></Container>
    </div>
    <van-tabs class="van-tab-box" v-model="active" color="#01A0EF" @change="clickChange">
      <van-tab v-for="(int, index) in sourceList" :key="index" :title="int.definition">
        <div class="container">
          <Nodata v-if="!dataList.length"></Nodata>
          <div v-else class="content-box">
            <van-list v-model="loading" :finished="finished" @load="onLoad">
              <van-cell v-for="(item, index) in dataList" :key="index">
                <van-row type="flex" align="center">
                  <van-col :span="4">
                    <div class="img-box">
                      <img
                        :src="item.portrait?item.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                        width="100%"
                        height="100%"
                        alt
                      >
                    </div>
                  </van-col>
                  <van-col :span="20">
                    <div class="text-box">
                      <van-row type="flex" justify="space-between" align="center">
                        <van-col>
                          <p class="usename-text">{{ item.comment_username}}</p>
                        </van-col>
                        <van-col>
                          <p class="reply-text" @click="replyPost(int.name,item)">回复</p>
                        </van-col>
                      </van-row>
                      <p class="time-text">{{item.comment_time}}</p>
                    </div>
                  </van-col>
                </van-row>
                <div class="read-text">
                  <p>{{ item.comment_content }}</p>
                </div>
                <div class="post-content">
                  <van-row type="flex" align="center">
                    <van-col>
                      <div class="post-box">
                        <img :src="item.file_path" width="100%" alt>
                      </div>
                    </van-col>
                    <van-col>
                      <div class="post-text">
                        <p
                          class="title-text"
                        >{{ int.name =='community'?item.article_title:item.proposal_title }}</p>
                      </div>
                    </van-col>
                  </van-row>
                </div>
              </van-cell>
            </van-list>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { article_listCommentMy } from "@/api/article";
import { proposal_listCommentMy } from "@/api/proposal";
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import Container from "../public/commentContainer/container"; // 导入发表评论组件
import { clacTime } from "@/utils";

export default {
  name: "commentMyModule",
  components: {
    Nodata,
    Container
  },
  data() {
    return {
      active: 0,
      isNoData: false,
      loading: false,
      finished: false,
      isComBox: false,
      isHide: false,
      listQuery: {
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId")
      },
      dataList: [],
      detailId: "",
      sourceList: [
        {
          name: "community",
          definition: "论坛"
        },
        {
          name: "proposal",
          definition: "合理化建议"
        }
      ]
    };
  },
  methods: {
    clickChange(index) {
      this.active = index;
      if (index == 0) {
        this.$route.query.name = "article";
        this.initList();
      }
      if (index == 1) {
        this.$route.query.name = "proposal";
        this.fetchList();
      }
    },
    replyPost(e, item) {
      if (e == "community") {
        this.isComBox = !this.isComBox;
        this.detailId = item.id;
        let community_info = {
          parent_id: item.comment_id,
          article_id: item.id,
          comment_content: "",
          like_nums: 0,
          company_id: localStorage.getItem("companyId") - 0
        };
        this.$store.dispatch("SetCommenInfo", community_info);
      }
      if (e == "proposal") {
        console.log(item);
        this.isComBox = !this.isComBox;
        this.detailId = item.id;
        let proposal_info = {
          parent_id: item.comment_id,
          proposal_id: item.id,
          comment_content: "",
          like_nums: 0,
          company_id: localStorage.getItem("companyId") - 0
        };
        this.$store.dispatch("SetCommenInfo", proposal_info);
      }
    },
    //获取数据
    async initList() {
      let query = Object.assign(this.listQuery);
      let res = await article_listCommentMy(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows.map(item => {
          return Object.assign({}, item, {
            comment_time: clacTime(item.comment_time)
          });
        });
      }
      this.loading = false;
      if (result.data.results <= result.data.rows.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.active == 1 ? this.fetchList() : this.initList();
      }, 1000);
    },
    //获取数据
    async fetchList() {
      let query = Object.assign(this.listQuery);
      let res = await proposal_listCommentMy(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows.map(item => {
          return Object.assign({}, item, {
            comment_time: clacTime(item.comment_time)
          });
        });
      }
      this.loading = false;
      if (result.data.results <= result.data.rows.length) {
        this.finished = true;
      }
    }
  },
  created() {
    if (this.active == 0) {
      this.$route.query.name = "article";
    }
    this.initList();
  }
};
</script>

<style lang="scss" scoped>
@import "./../community/commentMy.scss";
.com-box {
  position: relative;
  z-index: 3;
}
.van-tab-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
</style>
